<template>
  <div class="mapItem">
    <dt class="title">猜你喜欢</dt>
    <dl v-for="(item, index) in productList" :key="index" class="item">
      <dt class="image">
        <img
          src="http://p0.meituan.net/msmerchant/b34690f52ebdda221e4153c35878de8c2243192.jpg@275w_156h_1e_1c"
          alt="图片"
        />
      </dt>
      <dd>
        <span class="name">{{ item.title }}</span>
      </dd>
      <dd>
        <el-rate v-model="score" disabled text-color="#ff9900" score-template="{value}"> </el-rate>
      </dd>
      <dd class="est">{{ item.commentNum }}人评价</dd>
      <dd class="add">{{ item.areaName }}</dd>
      <dd class="price">
        <span class="s">￥</span>
        <span style="font-size:18px">{{ item.lowPrice }}</span>
        <span class="s">起</span>
      </dd>
    </dl>
  </div>
</template>

<script>
import api from '@/api/index';

export default {
  data() {
    return {
      productList: [],
      score: 3,
    };
  },
  created() {
    api.recommend().then((res) => {
      this.productList = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
@import '../../assets/css/products/mapitem.scss';
.mapItem{
  width: 500px;
  margin-top: 30px;
}
</style>
